<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>首页</h1>
<form th:action="@{/testRequestBody}" method="post"><br/>
    <input type="text" name="username"/><br/>
    <input type="text" name="password"/><br/>
    <input type="submit" value="测试 @RequestBody"/><br/>
</form>
<form th:action="@{/testRequestEnity}" method="post"><br/>
    <input type="text" name="username"/><br/>
    <input type="text" name="password"/><br/>
    <input type="submit" value="测试 @RequestBody"/><br/>
</form>
<a th:href="@{/testResponse}">通过 servletapi测试 response对象响应浏览器数据</a><br/>
<a th:href="@{/testResponseBody}">通过 responseBody测试 response对象响应浏览器数据</a><br/>
<a th:href="@{/testResponseUser}">通过 responseBody测试 response对象响应浏览器 JavaBean数据 </a><br/>
<br/>
<div id="app">
    <a @click="testAxios" th:href="@{/testAxjos}">springmvc 处理 ajax</a>
</div>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            /*点击事件*/
            testAxios: function (event) {
                axios({
                    method: "post",
                    url: event.target.href,
                    params: {
                        username: "admin",
                        password: "1234"
                    }
                }).then(function (response) {
                    alert(response.data)
                });
                /*取消超链接的默认行为*/
                event.preventDefault();
            }
        }
    });
</script>
</body>

</html>